<template>
	<!-- 笔记项 -->
	<div
		@click="handleEditNote"
		:class="isActive"
		class="ly-note-item w-full p-2 duration-300 hover:bg-blue-400 cursor-pointer rounded-md mb-1">
		<!-- 笔记标题 -->
		<div class="title w-full flex mb-1">
			<div :title="note.title" class="title-content flex-1 text-base truncate duration-300">
				{{ note.title }}
			</div>
			<div class="control flex-1 items-center justify-end duration-300">
				<slot name="tools">
					<div
						@click.stop="handleSaveToCloud"
						class="item rounded-full flex items-center justify-center ml-2">
						<i class="bi bi-cloud text-sm" title="保存到云端"></i>
					</div>
					<div
						@click.stop="handleExportNote"
						class="item rounded-full flex items-center justify-center ml-2">
						<i class="bi bi-box-arrow-in-up-right text-sm" title="导出笔记"></i>
					</div>
					<div
						@click.stop="viewDialogVisible = true"
						class="item rounded-full flex items-center justify-center ml-2">
						<i class="bi bi-info-circle text-sm" title="笔记详情"></i>
					</div>
					<div
						@click.stop="deleteDialogVisible = true"
						class="item rounded-full flex items-center justify-center ml-2">
						<i class="bi bi-trash3 text-sm" title="删除笔记"></i>
					</div>
				</slot>
			</div>
		</div>
		<!-- 笔记内容 -->
		<div
			class="note-content duration-300 w-full h-16 text-sm overflow-hidden text-gray-700 font-extralight text-justify dark:text-gray-400">
			{{ note.content }}
		</div>
		<!-- 笔记更新时间 -->
		<div class="update-time w-full duration-300">
			<span class="text-xs">最后修改：{{ note.updateTime }}</span>
		</div>
	</div>
	<ly-dialog v-model="viewDialogVisible" title="笔记信息">
		<div class="p-3 text-gray-800">
			<span>ID：{{ note.id }}</span>
		</div>
		<div class="p-3 text-gray-800">
			<span>标题：{{ note.title }}</span>
		</div>
		<div class="p-3 text-gray-800">
			<span>创建时间：{{ note.createTime }}</span>
		</div>
		<div class="p-3 text-gray-800">
			<span>最后修改时间：{{ note.updateTime }}</span>
		</div>
	</ly-dialog>
	<ly-dialog v-model="deleteDialogVisible" title="警告">
		<div class="text-center text-red-500">笔记删除后将无法恢复，是否确认删除？</div>
		<template #footer>
			<ly-button
				class="mr-2"
				@click.stop="deleteDialogVisible = false"
				text="取消"
				type="default" />
			<ly-button @click="handleDeleteNote" text="确认删除" type="primary" />
		</template>
	</ly-dialog>
</template>

<script lang="ts">
import type { Note } from '@/types';
import type { PropType } from 'vue';
import { saveAs } from 'file-saver';
import utilTip from '@/utils/util.tip';
import { saveNoteToCloudApi } from '@/api';
import { useNoteStore } from '@/stores/noteStore';
import LyDialog from '@/components/LyDialog/index.vue';
import { useSettingStore } from '@/stores/settingStore';

export default defineComponent({
	name: 'LyNoteItem',
	components: { LyDialog },
	props: {
		note: {
			type: Object as PropType<Note>,
			required: true,
		},
	},
	emits: ['on-click'],
	setup(props, { emit }) {
		const router = useRouter();
		const noteStore = useNoteStore();
		const settingStore = useSettingStore();

		const isActive = computed<string[]>(() => {
			if (props.note.id === noteStore.activeNote.id) {
				return ['shadow'];
			}
			return [];
		});

		// 导出笔记
		const handleExportNote = (): void => {
			const content = props.note.content;
			const blob = new Blob([content], { type: 'text/markdown' });
			saveAs(blob, `${props.note.title}-${props.note.id}.md`);
		};

		// 查看笔记信息
		const viewDialogVisible = ref<boolean>(false);

		// 删除笔记
		const deleteDialogVisible = ref<boolean>(false);
		const handleDeleteNote = (): void => {
			noteStore.deleteNode(props.note.id);
			deleteDialogVisible.value = false;
		};

		// 编辑笔记
		const handleEditNote = (): void => {
			router.push('/');
			noteStore.activeNote = { ...props.note };
			noteStore.editorStatus = 'edit';
			emit('on-click', props.note);
		};

		// 保存到云端
		const handleSaveToCloud = async (): Promise<void> => {
			const url = settingStore.cloudSyncUrl;
			const { safePassword } = settingStore.settingConfig;
			if (url.trim().length < 1 || safePassword.trim().length < 1) {
				utilTip.error('请先配置云端同步信息');
				return;
			}
			try {
				const res: any = await saveNoteToCloudApi(url, safePassword, props.note);
				if (res.code === 200) {
					utilTip.success('保存到云端成功');
				}
			} catch (error: any) {
				utilTip.error(`保存失败：${error.message}`);
			}
		};

		return {
			isActive,
			viewDialogVisible,
			deleteDialogVisible,
			handleEditNote,
			handleExportNote,
			handleDeleteNote,
			handleSaveToCloud,
		};
	},
});
</script>

<style lang="scss" scoped>
// 笔记项
.ly-note-item {
	.control {
		display: none;
	}

	// 笔记内容
	.title-content {
		color: #555;
	}

	// 笔记更新时间
	.update-time {
		color: #6a7282;
	}

	&:hover {
		box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.2);

		.title,
		.note-content,
		.title-content {
			color: white;
		}

		.update-time {
			color: #eee;
		}

		.control {
			display: flex;
		}
	}
}

html.dark {
	.update-time {
		color: #99a1af;
	}

	.title-content {
		color: #d1d5dc;
	}
}
</style>
